<template>
    <div  class="container center-box" :class="this.direction">
      <div class="input-box center-box" >
        <label v-text="label" style="text-align: left"></label>
        <el-input  minlength="1" maxlength="4" validate-event class="input-item" prefix-icon="el-icon-tickets" v-model="value" placeholder="请输入验证码(忽视大小写区别)" ></el-input>
      </div>

      <div class="validate-box center-box">
        <el-tooltip class="item" effect="dark" content="看不清？点我切换" placement="right">
        <a href="#" @click="chang" id="image"  :style="{width:iwidth+'px',height:iheight+'px'}">
          <el-image
            style="width: 100%; height: 100%"
            :src="imagePath"
            fit="fit"
            >
          </el-image>
        </a>

        </el-tooltip>
      </div>


    </div>
</template>

<script>
    export default {

      props: {
        url:{
          type:String,
          required:true,
          default:"http://localhost:8080/api/validate"
        },
        label:{
          type: String,
          default: "验证码"
        },
        direction:{
           type:String,
           default:"row"
        },
        iwidth:{
          type:Number,
          default:80
        },
        iheight:{
          type:Number,
          default:40
        }
      },
        name: "Validate",
      data() {

        return {
          imagePath:"",
          value:"",



        }
      },
      mounted() {

        let num=Math.ceil(Math.random()*10);
        this.imagePath=this.url+"?"+num;
      },
      methods:{
        chang:function () {
          let num=Math.ceil(Math.random()*10);
          this.imagePath=this.url+"?"+num;
        }
      },

    }
</script>

<style scoped type="less">


  .container{
    width: 100%;
    height: 100%;
    min-width:50px;
    min-height: 40px;
    display: flex;
    margin-bottom: 10px;

  }
  .input-box{
    flex: 8;
    display: flex;
    min-width: 250px;
    flex-direction:row ;
  }

  .input-box label{
    flex: 2;
  }
  .input-item{
    flex: 8;
    min-width: 30px;
    margin-right: 10px;

  }
  .validate-box{
    flex: 2;
    width: auto;
    display: flex;
  }

  .col{
    flex-direction: column;
  }
  .row{
    flex-direction: row;
  }
  .center-box{
    align-items: center;
    justify-content: center;
  }
</style>
